import { unstable_HistoryRouter as HistoryRouter, Routes, Route } from 'react-router-dom'
import { history } from './uitls/history'
// import Layout from './pages/Layout'
// import Login from './pages/Login'
import { Button } from 'antd';

import { AuthComponents } from '@/components/AuthComponents'
import './App.css'
import { lazy, Suspense } from 'react';

const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
const Publish = lazy(() => import('./pages/Publish'))
const Home = lazy(() => import('./pages/Home'))
const Article = lazy(() => import('./pages/Article'))

// import Login from '@/pages/Login'
// import Layout from '@/pages/Layout';
// import Publish from './pages/Publish'
// import Home from './pages/Home'
// import Article from './pages/Article'

function App() {
  return (
    //路由配置
    <HistoryRouter history={history}>
      <div className="App">
        <Suspense
          fallback={
            <div
              style={{ textAlign: 'center', marginTop: 200 }}>
              loading...
            </div>
          }
        >
          {/* <Button type="primary">Button</Button> */}
          <Routes>
            {/* 创建路由的对应关系 */}
            {/* 鉴权 这里layout组件不能写死，要判断是否登录*/}
            <Route path="/" element={
              <AuthComponents>
                <Layout />
              </AuthComponents>
            }>

              <Route index element={<Home />}></Route>
              <Route path="article" element={<Article />}></Route>
              <Route path="publish" element={<Publish />}></Route>
            </Route>
            <Route path="/login" element={<Login />}></Route>
          </Routes>

        </Suspense>
      </div>
    </HistoryRouter>
  );
}

export default App;
